<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Chat Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<style>
		* { margin: 0; padding: 0; box-sizing: border-box; }
		body { font: 13px Helvetica, Arial; }
		form { background: grey; padding: 10px; position: fixed; bottom: 0; width: 100%; }
		form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
		form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
		#messages { list-style-type: none; margin: 0; padding: 0; }
		#messages li { padding: 5px 10px; }
		#messages li:nth-child(odd) { background: #eee; }
	</style>

	<ul id="messages"></ul>

	<form action="">
		<input id="m" autocomplete="off" /><button>Send</button>
	</form>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>

	<script>
		var socket = io()

		document.querySelector('form').addEventListener('submit', (e) => {
			e.preventDefault();
			socket.emit('chat message', document.getElementById('m').value);
			document.getElementById('m').value = '';
		});

		socket.on('chat message', msg => {
			document.getElementById('messages').insertAdjacentHTML('beforeend', `<li>${msg}</li>`);
		});
	</script>
</body>
</html>
